<!-- 委托招人 -->
<template>
	<view class="entrustPeople" v-if="showEntrustPeople">
		<view class="layer">
			<view class="layerMain">
				<view class="top-box flex alignCenter">
					<uni-icons type="closeempty" size="26" color="#F7DD5E" @click="handleCancel"></uni-icons>
					<view>勾选已经发布的委托</view>
					<view class="font16 colorMain" @click="handleSure">确定</view>
				</view>
				<view class="list flex alignCenterc flexWrap">
					<view class="item" @click="handleAdd">
						<view class="add-item flex alignCenter">
							<view>
								<uni-icons class="bold" type="plusempty" size="20" color="#333"></uni-icons>
								<view class="title font14 color333">发布新的委托</view>
							</view>
						</view>
					</view>
					
					<view class="item" v-for="(item,index) in options" :key="index" @click="handleItem(index,item)">
						<view class="choose-item" v-if="ids.indexOf(item.id)>-1"> <image src="/static/image/icons/cr.png"></image> </view>
						<view class="item-top flex alignCenter"> 
							<view class="price font14"><view>{{item.bounty}}元</view> </view> 
							<!-- <view class="choose-item"> <image src="../../static/gou.png"></image> </view> -->
							<view class="date font12 color999">{{item.createTime.split(' ')[0]}}</view>
						</view>
						<view class="title font14 color333">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>


<script>
	import { entrustChoosePage,entrustFoundPerson} from "@/api/lookFor.js"
	
	import uniChoosemajor from "@/pages/mine/components/uni-choosemajor/uni-choosemajor.vue"
	export default {
		components:{
			uniChoosemajor
		},
		props: {
			// 学长学姐id
			seniorSisterId: {
				type: String,
				default: ''
			},
			// 学长学姐姓名
			seniorSisterName: {
				type: String,
				default: ''
			},
			// 学长学姐头像
			seniorSisterAvatar: {
				type: String,
				default: ''
			},
			//弹框显示隐藏
			showEntrustPeople: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				chooseIndex: '',
				ids: [],
				serchParam: {
					page: 1,
				},
				options: [],
			}
		},
		watch: {
			seniorSisterId(newValue) {
				this.getData();
			}
		},
		onShow() {
			this.getData();
		},
		methods: {
			getData(){
				let param = {
					page: this.serchParam.page,
					size: 10,
					createUserId: uni.getStorageSync('userId') //用户id
				}
				entrustChoosePage(param).then(res=>{
					console.log(1111,res);
					this.options = res.data.rows;
					this.total = res.data.total
				});
			},
			//新增发布信息委托
			handleAdd(){
				let item = {
					createUserId: this.seniorSisterId,
					createUserName: this.seniorSisterName,
					createUserAvatar: this.seniorSisterAvatar,
				}
				uni.navigateTo({
					url: `/pages/send/lookFor/publishPeople/publishPeople?type=1&items=${JSON.stringify(item)}`
				})
			},
			// 列表点击事件
			handleItem(index,item){
				// this.chooseIndex = index;
				if(this.ids.length>0 && this.ids.indexOf(item.id)>-1){
					this.ids.splice(this.ids.indexOf(item.id),1);
					return
				}
				this.ids.push(item.id);
			},
			
			handleCancel(){
				this.$emit('cancelEntrust')
			},
			
			// 委托找人
			handleSure(){
				if(this.ids.length<=0){
					return uni.showToast({
						title: '请选择委托信息',
						icon: 'none'
					})
				}
				let params = {
					createUserId: this.seniorSisterId,
					createUserName: this.seniorSisterName,
					createUserAvatar: this.seniorSisterAvatar,
					ids: this.ids
				}
				entrustFoundPerson(params).then(res=>{
					if(res.code == 100000){
						uni.showToast({
							title: '委托成功',
							icon: 'none'
						})
						this.handleCancel();
					}
				})
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.entrustPeople{
		position: fixed;
		width: 100%;
		// height: 500rpx;
		// overflow: auto;
		height: 100%;
		box-sizing: border-box;
		top:0;
		left:0;
		z-index: 999;
		.layer{
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .3);
			
			.layerMain{
				background: #fff;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				max-height: 900rpx;
				overflow: auto;
				border-radius: 32rpx 32rpx 0 0;
				// padding: 30rpx 0 0;
				box-sizing: border-box;
				.top-box{
					justify-content: space-between;
					height: 110rpx;
					margin: 0 30rpx;
				}
				
				.list{
					justify-content: space-between;
					margin: 0 30rpx;
					.item{
						position: relative;
						width: 310rpx;
						height: auto;
						min-height: 188rpx;
						text-align: center;
						border:1px solid #E4E4E4;
						border-radius: 24rpx;
						margin-bottom: 40rpx;
						.item-top{
							margin-top: 20rpx;
							justify-content: space-between;
							.date{
								margin-right: 40rpx;
							}
							.price{
								background: url('/pages/mine/static/u13.png') no-repeat;
								background-size: cover;
								background-repeat: no-repeat;
								transform: rotate(180deg);
								color: #fff;
								min-width: 120rpx;
								height: 48rpx;
								margin-left: -20rpx;
								view{
									transform: rotate(-180deg);
								}
							}
						}
						
						.add-item{
							height: 100%;
							justify-content: center;
						}
						.title{
							margin-top: 12rpx;
							// line-height: 1em;
							line-height: 32rpx;
							margin: 12rpx 20rpx 0 20rpx;
						}
						.choose-item{
							right: 0px;
							
							// width: inherit;
							height: 60rpx;
							// margin-left: ;
							// margin: auto;
							position: absolute;
							image{
								width: 60rpx;
								height: 60rpx;
								border-top-right-radius: 24rpx;
							}
						}
					
						
					}
					
				}
				
			}
		}
		
	}
</style>